<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参考链接：https://www.cnblogs.com/shuai7boy/p/5863098.html</title>
	</head>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		canvas {
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
	</style>
	<body>
		<div>
			<canvas id="canvas"></canvas>
			<canvas id="snow"></canvas>

			<div class="am-g" style="position: fixed; bottom: 0px;">
				<div class="am-u-sm-12">
					<div style="z-index: 9999" id="player" class="aplayer">
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../jquery相关/js/jq.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas'),
			ctx = canvas.getContext('2d'),
			w = canvas.width = window.innerWidth,
			h = canvas.height = window.innerHeight,

			hue = 217,
			stars = [],
			count = 0,
			maxStars = 1300; //星星数量

		var canvas2 = document.createElement('canvas'),
			ctx2 = canvas2.getContext('2d');
		canvas2.width = 100;
		canvas2.height = 100;

		var half = canvas2.width / 2,
			gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
		gradient2.addColorStop(0.025, '#CCC');
		gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
		gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
		gradient2.addColorStop(1, 'transparent');

		ctx2.fillStyle = gradient2;
		ctx2.beginPath();
		ctx2.arc(half, half, half, 0, Math.PI * 2);
		ctx2.fill();

		// End cache

		function random(min, max) {
			if (arguments.length < 2) {
				max = min;
				min = 0;
			}

			if (min > max) {
				var hold = max;
				max = min;
				min = hold;
			}

			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

		function maxOrbit(x, y) {
			var max = Math.max(x, y),
				diameter = Math.round(Math.sqrt(max * max + max * max));
			return diameter / 2;
			//星星移动范围，值越大范围越小，
		}

		var Star = function() {

			this.orbitRadius = random(maxOrbit(w, h));
			this.radius = random(60, this.orbitRadius) / 8;
			//星星大小
			this.orbitX = w / 2;
			this.orbitY = h / 2;
			this.timePassed = random(0, maxStars);
			this.speed = random(this.orbitRadius) / 50000;
			//星星移动速度
			this.alpha = random(2, 10) / 10;

			count++;
			stars[count] = this;
		}

		Star.prototype.draw = function() {
			var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
				y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
				twinkle = random(10);

			if (twinkle === 1 && this.alpha > 0) {
				this.alpha -= 0.05;
			} else if (twinkle === 2 && this.alpha < 1) {
				this.alpha += 0.05;
			}

			ctx.globalAlpha = this.alpha;
			ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
			this.timePassed += this.speed;
		}

		for (var i = 0; i < maxStars; i++) {
			new Star();
		}

		function animation() {
			ctx.globalCompositeOperation = 'source-over';
			ctx.globalAlpha = 0.5; //尾巴
			ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
			ctx.fillRect(0, 0, w, h)

			ctx.globalCompositeOperation = 'lighter';
			for (var i = 1, l = stars.length; i < l; i++) {
				stars[i].draw();
				canvas2.style.cssText = "display:none";
			};

			window.requestAnimationFrame(animation);
		}


		animation();


		// 点击放烟火
		$(function() {
			var Fireworks = function() {
				var self = this;
				var rand = function(rMi, rMa) {
					return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
				}
				var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2) {
					return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
				};
				window.requestAnimFrame = function() {
					return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
						.mozRequestAnimationFrame || window.oRequestAnimationFrame || window
						.msRequestAnimationFrame || function(a) {
							window.setTimeout(a, 1E3 / 60)
						}
				}();

				self.init = function() {
					self.canvas = document.createElement('canvas');
					self.canvas.width = self.cw = $(window).innerWidth();
					self.canvas.height = self.ch = $(window).innerHeight();
					self.particles = [];
					self.partCount = 150;
					self.fireworks = [];
					self.mx = self.cw / 2;
					self.my = self.ch / 2;
					self.currentHue = 30;
					self.partSpeed = 5;
					self.partSpeedVariance = 10;
					self.partWind = 50;
					self.partFriction = 5;
					self.partGravity = 1;
					self.hueMin = 0;
					self.hueMax = 360;
					self.fworkSpeed = 4;
					self.fworkAccel = 10;
					self.hueVariance = 30;
					self.flickerDensity = 25;
					self.showShockwave = true;
					self.showTarget = false;
					self.clearAlpha = 25;

					$(document.body).append(self.canvas);
					self.ctx = self.canvas.getContext('2d');
					self.ctx.lineCap = 'round';
					self.ctx.lineJoin = 'round';
					self.lineWidth = 1;
					self.bindEvents();
					self.canvasLoop();

					self.canvas.onselectstart = function() {
						return false;
					};
				};

				self.createParticles = function(x, y, hue) {
					var countdown = self.partCount;
					while (countdown--) {
						var newParticle = {
							x: x,
							y: y,
							coordLast: [{
									x: x,
									y: y
								},
								{
									x: x,
									y: y
								},
								{
									x: x,
									y: y
								}
							],
							angle: rand(0, 360),
							speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self
								.partSpeed - self.partSpeedVariance, (self.partSpeed + self
									.partSpeedVariance)),
							friction: 1 - self.partFriction / 100,
							gravity: self.partGravity / 2,
							hue: rand(hue - self.hueVariance, hue + self.hueVariance),
							brightness: rand(50, 80),
							alpha: rand(40, 100) / 100,
							decay: rand(10, 50) / 1000,
							wind: (rand(0, self.partWind) - (self.partWind / 2)) / 25,
							lineWidth: self.lineWidth
						};
						self.particles.push(newParticle);
					}
				};


				self.updateParticles = function() {
					var i = self.particles.length;
					while (i--) {
						var p = self.particles[i];
						var radians = p.angle * Math.PI / 180;
						var vx = Math.cos(radians) * p.speed;
						var vy = Math.sin(radians) * p.speed;
						p.speed *= p.friction;

						p.coordLast[2].x = p.coordLast[1].x;
						p.coordLast[2].y = p.coordLast[1].y;
						p.coordLast[1].x = p.coordLast[0].x;
						p.coordLast[1].y = p.coordLast[0].y;
						p.coordLast[0].x = p.x;
						p.coordLast[0].y = p.y;

						p.x += vx;
						p.y += vy;
						p.y += p.gravity;

						p.angle += p.wind;
						p.alpha -= p.decay;

						if (!hitTest(0, 0, self.cw, self.ch, p.x - p.radius, p.y - p.radius, p.radius * 2, p
								.radius * 2) || p.alpha < .05) {
							self.particles.splice(i, 1);
						}
					};
				};

				self.drawParticles = function() {
					var i = self.particles.length;
					while (i--) {
						var p = self.particles[i];

						var coordRand = (rand(1, 3) - 1);
						self.ctx.beginPath();
						self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[
							coordRand].y));
						self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
						self.ctx.closePath();
						self.ctx.strokeStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + p.alpha +
							')';
						self.ctx.stroke();

						if (self.flickerDensity > 0) {
							var inverseDensity = 50 - self.flickerDensity;
							if (rand(0, inverseDensity) === inverseDensity) {
								self.ctx.beginPath();
								self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth, p.lineWidth +
									3) / 2, 0, Math.PI * 2, false)
								self.ctx.closePath();
								var randAlpha = rand(50, 100) / 100;
								self.ctx.fillStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' +
									randAlpha + ')';
								self.ctx.fill();
							}
						}
					};
				};


				self.createFireworks = function(startX, startY, targetX, targetY) {
					var newFirework = {
						x: startX,
						y: startY,
						startX: startX,
						startY: startY,
						hitX: false,
						hitY: false,
						coordLast: [{
								x: startX,
								y: startY
							},
							{
								x: startX,
								y: startY
							},
							{
								x: startX,
								y: startY
							}
						],
						targetX: targetX,
						targetY: targetY,
						speed: self.fworkSpeed,
						angle: Math.atan2(targetY - startY, targetX - startX),
						shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) + (90 * (Math.PI /
							180)),
						acceleration: self.fworkAccel / 100,
						hue: self.currentHue,
						brightness: rand(50, 80),
						alpha: rand(50, 100) / 100,
						lineWidth: self.lineWidth
					};
					self.fireworks.push(newFirework);

				};


				self.updateFireworks = function() {
					var i = self.fireworks.length;

					while (i--) {
						var f = self.fireworks[i];
						self.ctx.lineWidth = f.lineWidth;

						vx = Math.cos(f.angle) * f.speed,
							vy = Math.sin(f.angle) * f.speed;
						f.speed *= 1 + f.acceleration;
						f.coordLast[2].x = f.coordLast[1].x;
						f.coordLast[2].y = f.coordLast[1].y;
						f.coordLast[1].x = f.coordLast[0].x;
						f.coordLast[1].y = f.coordLast[0].y;
						f.coordLast[0].x = f.x;
						f.coordLast[0].y = f.y;

						if (f.startX >= f.targetX) {
							if (f.x + vx <= f.targetX) {
								f.x = f.targetX;
								f.hitX = true;
							} else {
								f.x += vx;
							}
						} else {
							if (f.x + vx >= f.targetX) {
								f.x = f.targetX;
								f.hitX = true;
							} else {
								f.x += vx;
							}
						}

						if (f.startY >= f.targetY) {
							if (f.y + vy <= f.targetY) {
								f.y = f.targetY;
								f.hitY = true;
							} else {
								f.y += vy;
							}
						} else {
							if (f.y + vy >= f.targetY) {
								f.y = f.targetY;
								f.hitY = true;
							} else {
								f.y += vy;
							}
						}

						if (f.hitX && f.hitY) {
							self.createParticles(f.targetX, f.targetY, f.hue);
							self.fireworks.splice(i, 1);

						}
					};
				};

				self.drawFireworks = function() {
					var i = self.fireworks.length;
					self.ctx.globalCompositeOperation = 'lighter';
					while (i--) {
						var f = self.fireworks[i];
						self.ctx.lineWidth = f.lineWidth;

						var coordRand = (rand(1, 3) - 1);
						self.ctx.beginPath();
						self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[
							coordRand].y));
						self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
						self.ctx.closePath();
						self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + f.alpha +
							')';
						self.ctx.stroke();

						if (self.showTarget) {
							self.ctx.save();
							self.ctx.beginPath();
							self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1, 8), 0, Math
								.PI * 2, false)
							self.ctx.closePath();
							self.ctx.lineWidth = 1;
							self.ctx.stroke();
							self.ctx.restore();
						}

						if (self.showShockwave) {
							self.ctx.save();
							self.ctx.translate(Math.round(f.x), Math.round(f.y));
							self.ctx.rotate(f.shockwaveAngle);
							self.ctx.beginPath();
							self.ctx.arc(0, 0, 1 * (f.speed / 5), 0, Math.PI, true);
							self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + rand(
								25, 60) / 100 + ')';
							self.ctx.lineWidth = f.lineWidth;
							self.ctx.stroke();
							self.ctx.restore();
						}
					};
				};

				self.bindEvents = function() {
					$(window).on('resize', function() {
						clearTimeout(self.timeout);
						self.timeout = setTimeout(function() {
							self.canvas.width = self.cw = $(window).innerWidth();
							self.canvas.height = self.ch = $(window).innerHeight();
							self.ctx.lineCap = 'round';
							self.ctx.lineJoin = 'round';
						}, 100);
					});

					$(self.canvas).on('mousedown', function(e) {
						self.mx = e.pageX - self.canvas.offsetLeft;
						self.my = e.pageY - self.canvas.offsetTop;
						self.currentHue = rand(self.hueMin, self.hueMax);
						self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);

						$(self.canvas).on('mousemove.fireworks', function(e) {
							self.mx = e.pageX - self.canvas.offsetLeft;
							self.my = e.pageY - self.canvas.offsetTop;
							self.currentHue = rand(self.hueMin, self.hueMax);
							self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);
						});
					});

					$(self.canvas).on('mouseup', function(e) {
						$(self.canvas).off('mousemove.fireworks');
					});

				}

				self.clear = function() {
					self.particles = [];
					self.fireworks = [];
					self.ctx.clearRect(0, 0, self.cw, self.ch);
				};


				self.canvasLoop = function() {
					requestAnimFrame(self.canvasLoop, self.canvas);
					self.ctx.globalCompositeOperation = 'destination-out';
					self.ctx.fillStyle = 'rgba(0,0,0,' + self.clearAlpha / 100 + ')';
					self.ctx.fillRect(0, 0, self.cw, self.ch);
					self.updateFireworks();
					self.updateParticles();
					self.drawFireworks();
					self.drawParticles();

				};

				self.init();

			}
			var fworks = new Fireworks();

		});
	</script>
</html>
